<template>
	<view class="bg-[var(--page-bg-color)] min-h-screen overflow-hidden" :style="themeColor()">
		<view class="fixed left-0 right-0 top-0 z-99 bg-[#fff]">
			<view class="py-[24rpx] flex items-center justify-between px-[20rpx]">
				<view class="flex-1 bg-[#fafafa] p-[10rpx] rounded-[8rpx] mr-[20rpx]">
					创建时间: {{ create_time_str }}
				</view>
				<view class="nc-iconfont nc-icon-shaixuanV6xx !text-[40rpx] leading-[36rpx] text-[var(--text-color-light6)]"
					@click="handleSelectOrderSearch"></view>

			</view>
			<!-- 门店订单/个人订单 -->
			<view v-if="orderShowType == 'employee'" class="bg-[var(--page-bg-color)] p-[20rpx]">
				<u-subsection :list="searchType" @change="updateSearchType" mode="button" activeColor="var(--primary-color)"
					:fontSize="14" :current="searchTypeIndex"></u-subsection>
			</view>
		</view>
		<mescroll-body ref="mescrollRef" :top="orderShowType == 'employee' ? '200rpx' : '118rpx'" @init="mescrollInit"
			:down="{ use: false }" @up="geVerifyRecordFn">
			<view class="sidebar-margin pt-[var(--top-m)]" v-if="list.length">
				<block v-for="(item, index) in list" :key="item.id">
					<view class="w-full flex flex-col mb-[var(--top-m)] card-template" @click="toLink(item)">
						<!-- <view class="flex items-center mb-[30rpx] leading-[1] text-[28rpx]">
							<view class="nc-iconfont nc-icon-hexiaotaiV6xx !text-[28rpx] pr-[10rpx]"></view>
							<text class="truncate text-[#303133] text-[28rpx]">核销码:</text>
							<text class="ml-[10rpx] max-w-[494rpx]">{{ item.pickUpVerifyCode }}</text>
							<text class="text-[#303133] text-[28rpx] font-400 nc-iconfont nc-icon-fuzhiV6xx1 ml-[11rpx]"
								@click.stop="copy(item.pickUpVerifyCode)"></text>
						</view> -->
						<view class="flex justify-between items-center">

							<view class="text-[#303133] text-[28rpx] font-400 leading-[36rpx] ">
								<text>核销时间:</text>
								<text class="ml-[10rpx]">{{ timeFormat(item?.createTime, 'yyyy-mm-dd hh:MM:ss') }}</text>
							</view>
							<view class="text-[var(--primary-color)] text-[28rpx] leading-[34rpx]"
								:class="{ 'text-primary': item.status == 0, '!text-[var(--text-color-light9)]': item.status == 10 || item.status == 40 }">
								{{ formatOrderStatus(item) }}</view>
						</view>
						<u-line dashed margin="10rpx 0"></u-line>
						<view class="flex justify-between items-center">
							<view class="text-[#303133] text-[28rpx] font-400 leading-[36rpx]">
								<text>订单号:</text>
								<text class="ml-[10rpx]">{{ item.no }}</text>
								<text class="text-[#303133] text-[28rpx] font-400 nc-iconfont nc-icon-fuzhiV6xx1 ml-[11rpx]"
									@click.stop="copy(item.no)"></text>
							</view>

							<view class="text-[#303133] text-[28rpx] font-400 leading-[36rpx] ">
								<text class="ml-[10rpx]">{{ formatOrderType(item) }}</text>
							</view>
						</view>
						<u-line dashed margin="10rpx 0"></u-line>
						<view class="flex flex-1 p-y-[4rpx]" v-for="(dataItem, dataIndex) in item.items" :key="dataIndex">
							<u--image class="overflow-hidden" radius="var(--goods-rounded-big)" width="150rpx" height="150rpx"
								:src="img(dataItem.picUrl ? dataItem.picUrl : '')" model="aspectFill">
								<template #error>
									<image class="w-[150rpx] h-[150rpx] rounded-[var(--goods-rounded-big)] overflow-hidden"
										:src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill">
									</image>
								</template>
							</u--image>

							<view class="flex flex-col justify-between  flex-1 ml-[20rpx] py-[4rpx]">
								<view class="flex justify-between items-baseline">
									<view class="max-w-[322rpx] text-[32rpx] leading-[40rpx] font-bold  truncate text-[#303133]">
										<view class="brand-tag">
											{{ (dataItem.spuType == 2 || dataItem.spuType ==
												4) ? formatSkuType(dataItem.skuType) : formatSpuType(dataItem.spuType)
											}}
										</view>{{
											dataItem.spuName }}
									</view>

									<view class="text-right leading-[42rpx] ml-[10rpx] ">
										<uni-tooltip :content="'订单实售'" placement="top">
											<uni-icons type="info" size="14"></uni-icons>
											<template #content>
												<view class="w-100rpx">
													订单实售
												</view>
											</template>
										</uni-tooltip>
										<text class="text-[22rpx] price-font">￥</text>
										<text class="text-[36rpx] font-500 price-font">{{
											parseFloat(fen2yuan(dataItem.realPrice)).toFixed(2).split('.')[0]
										}}</text>
										<text class="text-[22rpx] font-500 price-font">.{{
											parseFloat(fen2yuan(dataItem.realPrice)).toFixed(2).split('.')[1]
										}}</text>
									</view>
								</view>
								<view class="flex justify-between items-baseline text-[#303133] ">
									<view>
										<view
											class="text-[24rpx] text-[var(--text-color-light6)] font-400 truncate leading-[34rpx] max-w-[369rpx] mb-[10rpx]">
											<text v-if="dataItem?.properties">{{ skuSpecFormat(dataItem.properties) }}</text>
										</view>
										<template v-if="subItem?.spuType == 2">
											<text v-if="subItem?.properties">|</text>
											<text>{{
												filterCardAttributes(subItem, true, true) }}</text>
										</template>
									</view>
									<text class="text-right text-[28rpx] font-400 w-[90rpx] leading-[36rpx]">x{{ dataItem.count
									}}</text>
								</view>
								<view class="flex justify-between items-baseline text-[#303133] ">
									<view class="flex items-baseline ">
										<view class="text-[22rpx] font-400 leading-[30rpx] text-[#303133]">订单实付:</view>
										<view class="leading-[1] text-[var(--price-text-color)]">
											<text class="text-[22rpx] leading-[28rpx] price-font">￥</text>
											<text class="text-[36rpx] font-500 leading-[40rpx] price-font">{{
												parseFloat(fen2yuan(dataItem.otherPrice)).toFixed(2).split('.')[0] }}</text>
											<text class="text-[22rpx] font-500 leading-[28rpx] price-font">.{{
												parseFloat(fen2yuan(dataItem.otherPrice)).toFixed(2).split('.')[1] }}</text>
										</view>
									</view>

								</view>


							</view>
						</view>
						<view class="flex justify-between items-center mt-[20rpx] bg-[#fafafa] p-[10rpx] rounded-[8rpx]">
							<view class="text-[#303133] text-[32rpx] font-400 leading-[36rpx] ">
								<text>核销员工:</text>
								<text class="ml-[10rpx]">{{ item.pickUpUsername ? item.pickUpUsername :
									'--'
								}}</text>
							</view>
							<view class="text-[#303133] text-[32rpx] font-400 leading-[36rpx] ">
								<text>核销门店:</text> <text class="ml-[4rpx]">{{ item.pickUpVerifyStoreName ?
									item.pickUpVerifyStoreName
									:
									'--'
								}}</text>
							</view>
						</view>
						<view class="flex justify-between items-center mt-[20rpx] bg-[#fafafa] p-[10rpx] rounded-[8rpx]">

							<view class="text-[#303133] text-[32rpx] font-400 leading-[36rpx] ">
								<text>下单门店:</text> <text class="ml-[4rpx]">{{ item.nodeName ?
									item.nodeName
									:
									'--'
								}}</text>
							</view>
						</view>
						<view class="flex justify-between items-center mt-[20rpx] bg-[#fafafa] p-[10rpx] rounded-[8rpx]">
							<view class="text-[#303133] text-[32rpx] font-400 leading-[36rpx] ">
								<text>会员:</text>
								<text class="ml-[10rpx]">{{ item?.user?.nickname }}({{ item?.user?.id }})</text>
							</view>
							<view class="text-[#303133] text-[32rpx] font-400 leading-[36rpx] "
								@click.stop="toCall(item?.user?.mobile)">
								<uni-icons type="phone" size="16"></uni-icons>
								<text class="ml-[4rpx]">{{ mobileConceal(item?.user?.mobile) }}</text>
							</view>
						</view>

					</view>
				</block>
			</view>
			<mescroll-empty v-if="!list.length && loading" :option="{ tip: '暂无核销记录' }"></mescroll-empty>
		</mescroll-body>

		<!-- 订单筛选 -->
		<select-order-search ref="selectOrderSearchRef" :time-type-list="timeTypeList" :default-date="create_time"
			:status-tabs="orderStateList" :source-list="orderSourceList" @confirm="confirmSearchFn"></select-order-search>

		<!-- #ifdef MP-WEIXIN -->
		<!-- 小程序隐私协议 -->
		<wx-privacy-popup ref="wxPrivacyPopupRef"></wx-privacy-popup>
		<!-- #endif -->
	</view>
	<!-- 水印 -->
	<watermark></watermark>
</template>

<script setup lang="ts">
import { ref, reactive, computed, nextTick } from 'vue'
import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue'
import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue'
import useMescroll from '@/components/mescroll/hooks/useMescroll.js'
import { onPageScroll, onReachBottom, onLoad } from '@dcloudio/uni-app'
import { getVerifyRecords } from '@/app/api/verify'
import { img, redirect, copy, mobileConceal } from '@/utils/common'
import selectDate from '@/components/select-date/select-date.vue';
import { formatOrderStatus, skuSpecFormat, formatOrderType, formatSkuType, formatSpuType, fen2yuan, timeFormat, getNowMonthDate, } from "@/utils/formatting"

const keyword = ref<string>('')
const create_time = ref<any>([])
const list = ref<Array<Object>>([])
const loading = ref<boolean>(false)
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom)
const wxPrivacyPopupRef: any = ref(null)
/** 搜索类型 */
const searchType = ref([{ name: '门店订单', value: 0 }, { name: '个人订单', value: 1 }])
const searchTypeIndex = ref(0)
const updateSearchType = (index: number) => {
	searchTypeIndex.value = index;
	getMescroll().resetUpScroll();
}
const orderShowType = ref('employee') //订单展示类型 employee 门店员工  member 会员
const orderStateList: any = ref([

	{
		name: '全部',
		status: undefined
	},

	{
		name: '待核销',
		status: 80
	},

	{
		name: '已核销',
		status: 100
	}
]);
const orderState = ref('')
const orderSource = ref(undefined)
const orderSourceList: any = ref([
	{
		name: '全部',
		status: undefined
	},
	{
		name: '门店',
		status: 4
	},
	{
		name: '商城',
		status: 5
	}
])
const timeTypeList = [{
	name: '创建时间',
	status: '0'
},
]
onLoad((option: any) => {
	orderShowType.value = option.type || "employee";
	if (orderShowType.value == "employee") {
		create_time.value = getNowMonthDate()
	}


	// #ifdef MP
	nextTick(() => {
		if (wxPrivacyPopupRef.value) wxPrivacyPopupRef.value.proactive();
	})
	// #endif
});
let wap_member_id = uni.getStorageSync('wap_member_id');
let wap_shop_member_id = uni.getStorageSync('wapShopMember').id;

const geVerifyRecordFn = (mescroll: any) => {
	loading.value = false;
	let data: object = {
		pageNo: mescroll.num,
		pageSize: mescroll.size,
		typeClass: 1,
		deliveryType: 2,
		keyword: keyword.value,
		employeeName: searchTypeIndex.value == 0 ? undefined : wap_member_id, //员工名称
		userId: orderShowType.value == "employee" ? undefined : wap_shop_member_id, //用户id
		status: orderState.value,
		source: orderSource.value,//订单来源
		createTime: create_time.value
	};

	getVerifyRecords(data).then((res: any) => {
		let newArr = (res.data.list as Array<Object>);

		//设置列表数据
		if (mescroll.num == 1) {
			list.value = []; //如果是第一页需手动制空列表
		}
		list.value = list.value.concat(newArr);
		mescroll.endSuccess(newArr.length);
		loading.value = true;
	}).catch(() => {
		loading.value = true;
		mescroll.endErr(); // 请求失败, 结束加载
	})
}
const toCall = (phoneNumber: any) => {
	console.log(phoneNumber)

	uni.makePhoneCall({
		phoneNumber: phoneNumber //仅为示例
	});
}
const toLink = (data: AnyObject) => {
	return
	// redirect({ url: '/app/pages/verify/detail', param: { code: data.code } })
}

// 关键词搜索条件搜索
const searchTypeFn = () => {
	getMescroll().resetUpScroll();
}

//日期筛选
const create_time_str = computed(() => {
	let beginTime = create_time.value[0] ? create_time.value[0].split(' ')[0] : '';
	let endTime = create_time.value[1] ? create_time.value[1].split(' ')[0] : '';
	return beginTime + ' - ' + endTime

})

//订单筛选
const selectOrderSearchRef = ref()
const handleSelectOrderSearch = () => {
	selectOrderSearchRef.value.show = true
}
const confirmSearchFn = (data: any) => {
	orderState.value = data.status;
	orderSource.value = data.source;
	create_time.value = data.create_time;
	keyword.value = data.keyword;
	list.value = []
	getMescroll().resetUpScroll();
}
</script>

<style lang="scss" scoped>
@import '@/addon/shop/styles/common.scss';

:deep(.uni-picker-view-content) {
	z-index: 10;
}

:deep(.uni-picker-view-indicator::before) {
	border: none !important;
}

:deep(.uni-picker-view-indicator::after) {
	border: none !important;
}
</style>
